<template>
	<view class="banner">
		<view class="bannerList p20">
			<view class="bannerItem card p20" v-for="(item, index) in bannerList" :key="item.id">
				<view class="itemTop dis">
					<view class="index">第{{ index + 1 }}个</view>
					<view class="delBut" @click="delItem(item)">删除</view>
				</view>
				<view class="itemImg" @click="bigImg(item.imageUrl)">
					<image :src="item.imageUrl" mode="aspectFill"></image>
				</view>
				<view class="itemBut" v-if="item.link">链接地址:{{ item.link }}</view>
			</view>
		</view>
		<view class="addVest dis" @click="open"><up-icon name="plus" color="#fff" size="30rpx"></up-icon></view>
	</view>
	<up-popup :show="showPop" mode="bottom" :round="10" @close="close" @open="open">
		<view class="add">
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					轮播图片
				</view>
				<view class="addVale">
					<view class="imgDom dis" @click="uploadImg">
						<image v-if="vestImg" :src="vestImg" mode="aspectFill"></image>
						<image v-else class="imgIcon" src="/pages/static/11.png" mode=""></image>
						<view v-if="vestImg" class="offImg" @click.stop="delImg">x</view>
					</view>
				</view>
			</view>
			<view class="addItem dis">
				<view class="addLable">
					<text>*</text>
					图片链接
				</view>
				<view class="addVale">
					<input v-model="vestName" type="text" placeholder-style="color: #cacaca;" placeholder="请填写图片链接" />
				</view>
			</view>
			<view class="addBut" @click="addSave">提交</view>
		</view>
	</up-popup>
</template>

<script setup>
import { getSchoolCarouselImage, addCarouselImage, deleteCarouselImage } from '@/config/api.js';
import { uploadImage } from '@/util/util.js';
import { ref } from 'vue';
import { onShow, onLoad, onReachBottom } from '@dcloudio/uni-app';
const schoolId = ref(0);
onLoad((options) => {
	console.log('options', options);
	schoolId.value = options.schoolId;
	getBanner();
});
onShow(() => {});

// 获取轮播图
const bannerList = ref([]);
const getBanner = async () => {
	const res = await getSchoolCarouselImage(schoolId.value);
	console.log(res.data.list);
	if (res.code == 0) {
		bannerList.value = res.data.list;
	}
};
const delItem = async (item) => {
	const res = await deleteCarouselImage(item.id, {});
	console.log(res);
	if (res.code == 0) {
		uni.showToast({
			title: '删除成功',
			icon: 'none'
		});
		getBanner();
	}
};
const bigImg = (url) => {
	uni.previewImage({
		current: 0, // 当前显示图片的索引（如果是多图）
		urls: [url] // 图片地址数组
	});
};

// 新增
const vestImg = ref('');
const vestName = ref('');
const showPop = ref(false);
const close = () => {
	showPop.value = false;
};
const open = () => {
	showPop.value = true;
};
const uploadImg = async () => {
	if (!!vestImg.value) return;
	const res = await uploadImage();
	if (res.code == 0) {
		vestImg.value = res.data.imgUrl;
	}
};
const delImg = (item) => {
	vestImg.value = '';
};
const addSave = async () => {
	if (!vestImg.value) {
		uni.showToast({
			title: '请选择图片',
			icon: 'none'
		});
	}
	const data = {
		link: vestName.value,
		imageUrl: vestImg.value
	};
	const res = await addCarouselImage(schoolId.value, data);
	if (res.code == 0) {
		uni.showToast({
			title: '新增成功',
			icon: 'none'
		});
		close();
		getBanner();
	} else {
		uni.showToast({
			title: res.message,
			icon: 'none'
		});
	}
};
</script>

<style lang="scss" scoped>
.banner {
	width: 100%;
	.bannerList {
		padding-top: 20rpx;
		width: 100%;
		.bannerItem {
			.itemTop {
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
			}
			.itemImg {
				margin-top: 20rpx;
				width: 100%;
				height: 200rpx;
				background-color: #ccc;
				border-radius: 15rpx;
				overflow: hidden;
			}
			.itemBut {
				margin-top: 20rpx;
				font-size: 26rpx;
				line-height: 50rpx;
			}
		}
	}
	.addVest {
		position: fixed;
		bottom: 50rpx;
		right: 30rpx;
		justify-content: center;
		align-items: center;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		background-color: #01b3f8;
	}
}
.add {
	margin-top: 30rpx;
	padding: 0 30rpx;
	padding-bottom: 30rpx;
	.addItem {
		align-items: center;
		padding-top: 30rpx;
		padding-bottom: 30rpx;
		border-bottom: 2rpx solid #ededed;
		.addLable {
			margin-right: 30rpx;
			color: #676566;
			font-size: 26rpx;
			text {
				color: #e74133;
			}
		}
		.addVale {
			.imgDom {
				position: relative;
				justify-content: center;
				align-items: center;
				width: 130rpx;
				height: 130rpx;
				border-radius: 20rpx;
				background-color: #f7f8fa;
				.imgIcon {
					width: 70rpx;
					height: 70rpx;
				}
				.offImg {
					position: absolute;
					right: 0;
					top: 0;
					width: 40rpx;
					height: 40rpx;
					line-height: 30rpx;
					font-size: 26rpx;
					text-align: center;
					border-radius: 0rpx 10rpx 0rpx 40rpx;
					background: #000;
					color: #fff;
				}
			}
			input {
				font-size: 26rpx;
			}
		}
	}
	.addBut {
		margin: 0 auto;
		margin-top: 40rpx;
		width: 80%;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		border-radius: 30rpx;
		font-size: 28rpx;
		color: #fff;
		background-color: #1c9aee;
	}
}
.delBut {
	width: 90rpx;
	height: 50rpx;
	line-height: 50rpx;
	border-radius: 25rpx;
	text-align: center;
	font-size: 26rpx;
	color: #fff;
	background-color: #e74133;
}
</style>
<style>
page {
	background-color: #f7f7f7;
}
image {
	width: 100%;
	height: 100%;
}
.u-swipe-action-item__right__button__wrapper {
	background-color: #e63f31 !important;
}
.card {
	margin-bottom: 20rpx;
	background-color: #fff;
	border-radius: 15rpx;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}
</style>
